<template>
	<!-- 订单管理页面 -->
	<view class="content">
		<showAddress v-if="showaddress" :id="currentId" :address="currentAddress"class="c-address" @close="showaddress = false"/>
		<!--  左 -->
		<view class="types">
			<view class="type" :class="{selected:current===type}" v-for="(type,idx) in types" :key="idx"
				@click="chooseZt(type)">{{type}}</view>
		</view>
		<!-- 右 -->
		<view class="goods">
			<view class="good" v-for="(order,idx) in orders" :key="idx">
				<view class="good-head">
					<view class="good-code">订单编号：{{order.orderNumber}}</view>
					<view class="qvyi" v-if="current==='已下单'&&order.come==='是'" @click="qvyi(order.customerName,order.address)">待取衣 ·</view>
					<view class="qvyi" v-if="current==='已打包'&&order.come==='是'" @click="qvyi(order.customerName,order.address)">待送衣 ·</view>
				</view>
				<view class="zhongjian">
					<view class="zj-left">
						<view class="good-info">下单用户：{{order.customerName}}</view>
						<view class="good-info">订单金额：¥{{order.totalAmount}}</view>
						<view class="good-info">联系方式：{{order.customerPhone}}</view>
						<view class="good-info2">下单时间：{{order.orderTime}}</view>
					</view>
					<!-- <image src="../../static/wode.png" class="zj-right"></image> -->
					<view class="zj-right" @click="previewImages(order.images)">
					  <swiper class="swiper" indicator-dots >
					    <swiper-item v-for="(img,idx) in order.images" :key="idx">
					      <image :src="img" mode="aspectFill" class="slide-img" />
					    </swiper-item>
					  </swiper>
					</view>
				</view>
				
				<view class="good-info">我的备注：{{order.remark || '无'}}</view>
				<!-- 状态标签 -->
				<view class="good-status" v-if = "order._next" @click="doAction(order)">
				  <text v-if="!order._anim">{{ order._next || '' }}</text>
				  <text v-else class="check">✓</text>
				</view>
			</view>
		</view>
		

	</view>

</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch,
		
	} from 'vue'
	import { onLoad,onUnload } from '@dcloudio/uni-app'
	import showAddress from '../../components/showAddress.vue'
	import {orderMock,fetchOrderList,addNote,} from '../../api/order.js'
	// import { useOrderBadgeStore } from '../../stores/order'
	// import { storeToRefs } from 'pinia'
	// const { hasUnread } = storeToRefs(badge)
	// const badge = useOrderBadgeStore()
	


	const types = ['已下单', '已到店', '已清洗', '已烘干', '已熨烫', '已打包','已完成']
	const current = ref('已下单')
	const showaddress = ref(false)
	const currentId   = ref('') //其实是用户名
	const currentAddress = ref('')//用户地址

	// const allOrders = ref({})

	
	const allOrders = ref([])
	const orders = ref([])
	const action = ref([
		
	])
	const chooseZt=async(type)=>{
		current.value = type
		console.log(12222222,current.value)
		fetchPL()
		
	}

	/* ③ 点击：动画 → 自动消失 */
const doAction = async (order) => {
  if (!order._next || order._anim) return
  order._anim = true    // 立即变 ✓

  try {
	  await addNote({
		  orderId:order.orderId,
		  orderStatus:nextStatus(current.value)
	  })
 
  } catch (e) {
    order._anim = false   // 失败恢复按钮
    uni.showToast({ title: '修改失败', icon: 'none' })
  }
}


	// 放在 methods 里
	const previewImages = (imgs) => {
	  wx.previewImage({
	    current: imgs[0],        // 首张
	    urls: imgs               // 全部
	  })
	}
	function nextStatus(cur) {
	  const i = types.indexOf(cur)
	  return i < types.length - 1 ? types[i + 1] : null
	}
	const qvyi = (id,address) => {
	  currentId.value = id   // 先存
	  currentAddress.value  = address
	  console.log('上门订单id:',id)
	  console.log('上门订单地址:',address)
	  showaddress.value = true
	}
	


	const c = ref(1)
	const fetchPL= async()=>{
		const res = await fetchOrderList({ 
			// shopId: c.value,
			orderStatus:current.value,
		})
		console.log('orderList接口返回数据:', res.data)
		allOrders.value = res.data.records
		   //暂时设定orders里面就是全部订单
		
		allOrders.value = res.data.records.map(item => ({
		    ...item,
		    _next: nextStatus(item.orderStatus),   // 算出下一状态
		    _anim: false                      // 动画开关
		  }))
		orders.value=allOrders.value
	}
	
	onMounted(async() => {
		    await fetchPL();

	})
</script>

<style>
	.content {
		display: flex;
		height: 100vh;
		width: 100%;
		background: linear-gradient(to bottom,
				#f3eff2 0%,
				#f6f7f9 30%,
				/* 渐变结束点 */
				#f6f7f9 100%
				/* 后半段保持同色 */
			);
		padding-top: 20rpx;
		position: relative;
	}

	.types {
		display: flex;
		flex-direction: column;
		width: 130rpx;
		height: 100%;
		overflow-y: auto;
		padding-right: 20rpx;

	}

	.goods {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		padding: 20rpx;
		padding-bottom: 200rpx;
	}

	.good {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-top: 20rpx;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .05);
	}
	.zhongjian{
		width:100%;
		display: flex;
		height:auto;
	}
	.zj-right{
		width:150rpx;
		height:150rpx;
		background-color: #007AFF;
	}
	.swiper { width: 100%; height: 100%; }
	.slide-img { width: 100%; height: 100%; border-radius: 8rpx; }
		
	.zj-left{
		flex:1
	}

	.good-code,
	.good-info {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}
	.good-info2 {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 8rpx;
	}
		
	.good-head{
		border-bottom: #d5e6fd solid 1rpx;
		line-height: 50rpx;
		margin-bottom: 18rpx;
		display: flex;
		width:100%;
	}
	.good-code{
		flex:1;
	}
	.qvyi{
		background-color:#eaa0a1;
		color:white;
		border-radius: 10rpx;
		width:auto;
		font-size: smaller;
		height:40rpx;
		line-height: 40rpx;
		padding:0 10rpx;
	}

	.good-status {
		position: absolute;
		right: 24rpx;
		bottom: 24rpx;
		font-size: 26rpx;
		color: #007AFF;
		background: #f0f7ff;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	.type {
		display: flex;
		width: 100%;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		border-radius: 0 20rpx 20rpx 0;
		color: black;
		font-size: 35rpx;
	}

	.type.selected {
		color: #aa0000;
		background-color: white;
		border-left: 1rpx solid #d5e6fd;
	}

	.good-status.anim .check {
		display: inline-block;
		animation: check-rotate 0.4s ease-in-out;
	}

	@keyframes check-rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
	.c-address{
		display: flex;
		z-index: 100;
		border:solid 1rpx blue;
		position:absolute;
		top:0;
		letf:0;
	}
</style>